<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>CHAT</title>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/json-pushlet-client.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.cookie.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/pushlet-api.js"></script>
    <script type="text/javascript">
        var userId = Math.round(Math.random() * 1000);

        function joinAndListenAndSubscribe() {
            if ($("#msg").val() == "") {
                alert("enter pid!");
                return;
            }

            $.pushlet.join($("#msg").val());
            $("#msg").val("");
            $.pushlet.listen();
            subscribe();
            userLogin();
        }

        function subscribe() {
            $.pushlet.subscribe("login", "1");
            $.pushlet.subscribe("chat", "2");
        }

        function unsubscribe() {
            $.pushlet.unsubscribe("login", "1");
            $.pushlet.unsubscribe("chat", "2");
        }

        function userLogin() {
            $.pushlet.ajax({
                type: "post",
                url: "/im/login.do",
                subject: "login",
                label: "1",
                data: {"name": "xnkl" + userId}
            });
        }

        function userLogout() {
            $.pushlet.ajax({
                type: "post",
                url: "/im/login.do",
                subject: "login",
                label: "1",
                data: {"name": "xnkl" + userId, "logout": true}
            });
        }

        // 登录事件回调
        function login(event) {
            var logout = event.logout;
            var name = event.name;
            if (logout)
                $("#_content").append(name + " logout!<br/>");
            else {
                $("#_content").append(name + " login!<br/>");
            }
        }
        // 聊天事件回调
        function chat(event) {
            $("#_content").append(event.name + " said: " + decodeURIComponent(event.msg) + "<br/>");
        }

        function sendMsg() {
            $.pushlet.ajax({
                type: "post",
                url: "/im/chat.do",
                subject: "chat",
                label: "2",
                data: {"name": "xnkl" + userId, "msg": encodeURIComponent($("#msg").val())},
                dataType: "json"
            });
            $("#msg").val("");
        }

        function leave() {
            userLogout();
            $.pushlet.leave();
        }

        function setDebug() {
            $.pushlet.setDebug(true);
        }
    </script>
    <style type="text/css">
        .buttondiv{width: 329px;}
    </style>
</head>
<body>
<div class="buttondiv">
    <input type="button" value="调试" onclick="setDebug()"/>
    <input type="button" value="登录并订阅" onclick="joinAndListenAndSubscribe()"/>
    <input type="button" value="退出" onclick="leave()"/>
    <input type="button" value="订阅" onclick="subscribe()"/>
    <input type="button" value="取消订阅" onclick="unsubscribe()"/>
    <input type="text" id="msg" value=""/>
    <input type="button" value="发送" onclick="sendMsg()"/>
</div>
<div id="_content"></div>
</body>
</html>
